import React, { useState, useRef } from "react";
import { ColorPicker, Slider, Button } from "antd";
import type { InputNumberProps, ColorPickerProps } from "antd";
import Child from "./Children";
import "./MyTable2.scss";

interface info {
  name: string;
  address: {
    new: string;
  };
}
const MyTable2 = () => {
  const ref = useRef<HTMLDivElement>(null);
  const [value, setValue] = useState<number | undefined>(
    Number(sessionStorage.getItem("value")) || 1
  );
  const [inputValue, setInputValue] = useState(
    Number(sessionStorage.getItem("value")) || 1
  );
  const [info, setInfo] = useState<info>({
    name: "",
    address: {
      new: "地址",
    },
  });
  const colorChange: ColorPickerProps["onChangeComplete"] = (color) => {
    ref.current!.style.backgroundColor = color.toHexString();
    sessionStorage.setItem("bgc", color.toHexString());
  };

  const onChange: InputNumberProps["onChange"] = (newValue) => {
    setInputValue(newValue as number);
    setValue(newValue as number);
    sessionStorage.setItem("value", newValue as string);
  };
  const changeChildInfo = () => {
    setInfo({
      name: "",
      address: {
        new: "改变后地址",
      },
    });
  };
  return (
    <div
      className="content"
      ref={ref}
      style={{ backgroundColor: sessionStorage.getItem("bgc") as string }}
    >
      <div className="center">
        <Button onClick={changeChildInfo} type="primary">
          改变子组件数据
        </Button>
        <Child value={value} info={info} changeSlider={onChange}></Child>
        <Slider
          min={1}
          max={5}
          onChange={onChange}
          value={typeof inputValue === "number" ? inputValue : 1}
        />
        <ColorPicker
          className="colorPicker"
          allowClear
          defaultValue={sessionStorage.getItem("bgc")}
          onChangeComplete={(color) => {
            colorChange(color);
          }}
        />
      </div>
    </div>
  );
};

export default MyTable2;
